<!DOCTYPE html>
<!--[if IE 8]>
<html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]>
<html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zh" xmlns:th="http://www.w3.org/1999/xhtml">
<!--[endif]-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
   <!-- <script th:src="@{/static/scripts/flat-ui.js}"></script>-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="shortcut icon" th:href="@{/static/image/favicon.ico}" type="image/x-icon"/>
    <meta charset="UTF-8">
    <title>茶叶溯源管理系统</title>
    <script th:src="@{/static/js/jquery-3.3.1.min.js}"></script>
<!--    <link th:href="@{/static/css/vendor/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/static/css/flat-ui.css}" rel="stylesheet">
    <script th:src="@{/static/scripts/flat-ui.min.js}"></script>
    <script th:src="@{/static/scripts/particles.js}"></script>
    <link th:href="@{/static/css/animate.css}" rel="stylesheet">-->
    <link href="https://www.layuicdn.com/layui/css/layui.css" rel="stylesheet">
</head>

<body>
<div id="particles-js">
    <canvas class="particles-js-canvas-el" width="1322" height="774" style="width: 100%; height: 100%;"></canvas>
</div>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black"> 茶叶管理系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-smallproduct layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>



            <li class="layui-nav-smallproduct " >
                <form class="layui-form" th:action="@{/product/userQuerysmallproductByProductId/{code}}" method="post" name="query">
                    <div class="layui-inline" >
                        <div class="layui-input-inline" >
                            <div class="layui-input-block">
                                <input  id="code" type="text" name="code" value="" lay-verify="code" autocomplete="off" placeholder="请输入标题" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <button  id="btn-search" type="submit" class="layui-btn" lay-submit="" lay-filter="">立即提交</button>
                </form>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-smallproduct layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <span th:text="${session.userName}"></span>
                </a>
            </li>
            <li class="layui-nav-smallproduct layui-hide layui-show-md-inline-block">
                <a href="/logout">Sign out</a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-smallproduct layui-nav-smallproducted">
                    <a class="" href="javascript:;">产品管理手册</a>
                    <dl class="layui-nav-child">
                        <dd><a href="https://baike.baidu.com/smallproduct/%E7%BA%A2%E8%8C%B6/185424?fr=aladdin">红茶</a></dd>
                        <dd><a href="https://baike.baidu.com/smallproduct/%E4%B9%8C%E9%BE%99%E8%8C%B6/1072?fr=aladdin">乌龙茶</a></dd>
                        <dd><a href="https://baike.baidu.com/smallproduct/%E7%BB%BF%E8%8C%B6/13497">绿茶</a></dd>
                        <dd><a href="https://baike.baidu.com/smallproduct/%E8%8C%89%E8%8E%89%E8%8A%B1%E8%8C%B6/1173">茉莉花茶</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-smallproduct">
                    <a href="javascript:;">系统操作手册</a>
                    <dl class="layui-nav-child">
                        <dd><a href="http://www.360doc.com/content/11/1109/12/7082867_163014077.shtml">茶叶管理技术</a></dd>
                        <dd><a href="https://baike.baidu.com/smallproduct/%E8%8C%B6%E5%8F%B6%E5%82%A8%E5%AD%98/1124618?fr=aladdin">茶叶存储</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>这里是用户界面</legend>
            <legend>欢迎来到用户界面</legend>
            <legend>可在上方搜索栏搜索你想要的茶叶产品</legend>
            <legend>下方是企业文化</legend>
        </fieldset>
        <ul class="layui-timeline">
            <li class="layui-timeline-smallproduct">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">8月18日</h3>
                    <p>
                        茶厂管理系统正式建立
                        <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
                        <br>无论它能走多远，抑或如何支撑？至少曾倾注全心，无怨无悔 <i class="layui-icon"></i>
                    </p>
                </div>
            </li>
            <li class="layui-timeline-smallproduct">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">8月16日</h3>
                    <p>茶厂管理系统可为<em>“各种茶叶类型”</em>建立产品管理</p>
                    <ul>
                        <li>红茶</li>
                        <li>绿茶</li>
                        <li>茉莉花茶</li>
                        <li>乌龙茶</li>
                    </ul>
                </div>
            </li>
            <li class="layui-timeline-smallproduct">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">8月15日</h3>
                    <p>
                        每一份茶叶
                        <br>铭记、感恩
                        <br>久久不能释怀
                        <br>你不会后悔
                    </p>
                </div>
            </li>
            <li class="layui-timeline-smallproduct">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">过去</div>
                </div>
            </li>
        </ul>

    </div>
</div>


<script>
    //JS
layui.use(['element', 'layer', 'util','carousel'], function(){
    var element = layui.element
        ,layer = layui.layer
        ,util = layui.util
        ,$ = layui.$;
    var carousel = layui.carousel;
    //建造实例
    carousel.render({
        elem: '#test1'
        /* ,full:true*/
        ,width: '100%' //设置容器宽度
        ,height: '100%' //设置容器高度
        , arrow: 'always'//始终显示箭头
        ,anim: 'default' //切换动画方式
        ,interval:'1000'//自动切换的时间间隔,不能低于800
        ,indicator:'inside'//指示器位置,如果设定了 anim:'updown'，该参数将无效
        /* ,arrow:'hover'*/
    });
    //头部事件
    util.event('lay-header-event', {
        //左侧菜单事件
        menuLeft: function(othis){
            layer.msg('展开左侧菜单的操作', {icon: 0});
        }
        ,menuRight: function(){
            layer.open({
                type: 1
                ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                ,area: ['260px', '100%']
                ,offset: 'rt' //右上角
                ,anim: 5
                ,shadeClose: true
            });
        }
    });
});
</script>

<script src="https://www.layuicdn.com/layui/layui.js"></script>
</body>
</html>
